<template>
  <!-- 
    保存为我的模板 或 官方模板
   -->
  <a-modal v-model:visible="visible" :title="getTitle()" :maskClosable="false">
    <a-form ref="formRef" :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"
      autocomplete="off" :rules="rules" :title="title">
      <a-form-item :label="templateType == 'mixedShear' ? '混剪项目名称' : '模板名称'" name="name">
        <a-input v-model:value="formState.name" :placeholder="templateType == 'mixedShear'
          ? '请输入混剪项目名称'
          : '请输入模板名称'
          " allowClear></a-input>
      </a-form-item>
      <!-- 混剪项目不需要标签列表 -->
      <div v-if="templateType != 'mixedShear'">
        <a-form-item v-for="item in tagGroup" :label="item?.name" :key="item.id">
          <a-select v-model:value="selectedTags[item.id]" :options="item.tag_list" placeholder="请选择行业" allowClear
            @change="selectHandle()" mode="multiple" :maxTagCount="1" />
        </a-form-item>
      </div>
    </a-form>
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="btnLoading" @click="submitHandle(templateType)">确定</a-button>
    </template>
  </a-modal>
</template>

<script>
import {
  reactive,
  toRefs,
  defineComponent,
  computed,
  watch,
  defineExpose,
} from "vue";
// 导入通用工具
import request from "@/common/utils/request";
// 仓库
import { useStore } from "vuex";
import { nanoid } from "nanoid";
import { useRouter, useRoute } from "vue-router";
import { message } from "ant-design-vue";

import { getSubmitData } from "../../utools/index.js";

export default defineComponent({
  props: {
    queryId: {
      type: String,
    },
    queryData: {
      type: Object,
    },
  },

  setup(props, context) {
    const state = reactive({
      visible: false,
      formState: {
        name: "", //模板名称
      },
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
      },
      tagGroup: [], //标签组列表
      formRef: null,
      selectedTags: {}, //选中的标签
      templateType: "", //弹窗类型(official:官方模板,base:'基础模板',mixedShear:'混剪项目')
      btnLoading: false, //按钮加载效果
    });
    // 仓库
    const store = useStore();
    // 仓库中的混剪数据
    const VideoMashup = computed(() => {
      return store.state.shotstack.VideoMashup;
    });
    // 视频组视频为空 不能提交
    const allVideoGroup = computed(() => {
      return store.getters.allVideoGroup;
    });
    const router = useRouter();
    const route = useRoute();
    // 获取路由参数
    const queryData = computed(() => {
      return {
        viewType: route.query?.viewType, // 1模板详情, 2混剪详情
        id: route.query?.id, // 详情id
        key: route.query?.key, // 获取详情的id键名
        type: route.query?.type, // 用于区分新建的类型
        templateType: route.query?.templateType, // 用于区分查看模板详情的类型 1为我的模板 2为模板广场
        createType: route.query?.createType, // 用于区分模板创建类型 1为网络连接 2为素材库 3为手动创建
        useType: route.query?.useType, // 用于区分模板使用的类型 edit 编辑 view 详情 use使用
        typeofuse: route.query?.typeofuse, // 用于区分模板点击使用使用的类型 myTemplate为我的模板 squareTemplate为模板广场
      };
    });
    // 获取弹窗标题
    const getTitle = () => {
      switch (state.templateType) {
        case "officialTemplate":
          return "保存为官方模板";
        case "baseTemplate":
          return "保存为模板";
        case "mixedShear":
          return "保存为混剪项目";
        default:
          return "";
      }
    };
    // 打开弹窗
    const showModal = (type) => {
      state.selectedTags = VideoMashup.value?.tag_id || {};
      state.templateType = type; //打开弹窗的类型
      state.formState.name = VideoMashup.value?.name; //初始化名字
      getSelectList(); //获取下拉列表
      state.visible = true; //显示弹窗
    };
    // 关闭弹窗
    const handleCancel = () => {
      state.formRef.resetFields(); //清空表单
      emptSelect(); //清空下拉列表
      state.visible = false; //关闭弹窗
    };
    // 清空下拉列表
    const emptSelect = () => {
      //  判断selectedTags是否有键值
      const keys = Object.keys(state.selectedTags);
      if (keys.length > 0) {
        keys.forEach((key) => {
          // 只在数组有长度时才清空
          if (state.selectedTags[key].length > 0) {
            state.selectedTags[key] = []; //逐个清空选中的标签
          }
        });
      }
    };
    // 获取标签下拉列表
    const getSelectList = () => {
      request
        .get("/work_ai", "/user/shotstack/template/tags")
        .then((res) => {
          if (res.result) {
            // 处理得到的标签组列表
            state.tagGroup = res.result.map((item) => {
              console.log(item);
              if (item.tag_list) {
                item.tag_list = item.tag_list.map((tag) => {
                  return { label: tag.name, value: tag.id };
                });
              }
              return item;
            });
            console.log(state.tagGroup, "标签列表");
          }
        })
        .finally(() => { });
    };
    // 标签选择处理
    const selectHandle = (e) => {
      console.log(e);
      console.log(state.selectedTags);
    };
    // 保存模板
    const submitHandle = async (savetype) => {
      await state.formRef.validate(); //触发表单校验

      // 视频组视频为空 不能提交
      if (!allVideoGroup.value)
        return message.warning("视频组中的素材不能为空");
      const submitData = getSubmitData();
      // 表单提交数据
      let paramsObj = {
        ...submitData,
        name: state.formState.name,
      };
      // 从模板广场进来的保存
      if (route.query.viewType == "1") {
        switch (state.templateType) {
          case "mixedShear":
            // debugger;
            paramsObj.type = 0; //剪辑类型
            // 判断如果是使用id为0
            if (route.query.useType == "use") {
              paramsObj.id = 0;
              console.log(paramsObj);
            }
            break;

          case "baseTemplate":
            // 判断至少选中一个标签
            if (Object.keys(state.selectedTags).length <= 0) {
              return message.error("请至少选择一个标签");
            }
            // 判断如果是新增
            if (!queryData.value.id) {
              // 则需要传值模板类型为私有模板
              paramsObj.template_public = 0;
            }
            paramsObj.type = 1; //模板类型
            paramsObj.tag_id = state.selectedTags; //标签列表
            break;
          case "officialTemplate":
            // 判断至少选中一个标签
            if (Object.keys(state.selectedTags).length <= 0) {
              return message.error("请至少选择一个标签");
            }
            // 判断如果是新增，
            if (!queryData.value.id) {
              // 则需要传值模板类型为官方模板
              paramsObj.template_public = 1;
              // 非手动创建, 并且选择了保存官方模板需要重新获取id
              if (queryData.value.createType != 3) {
                const uniqueIdResult = await request.get(
                  "/work_ai",
                  `/user/platform/uniqueId/by/num`,
                  {
                    num: 32,
                  }
                );
                paramsObj.id = uniqueIdResult.uniqueId;
              }
            }
            paramsObj.type = 1; //模板类型
            paramsObj.tag_id = state.selectedTags; //标签组id
            break;
        }

        // 发送调用模板保存接口
        state.btnLoading = true;
        // paramsObj.cover_config.type == 0 && (paramsObj.cover_config.type = 1);
        if (savetype == "officialTemplate") {
          paramsObj.template_public = 1;
        }
        // debugger;
        try {
          request
            .post("/work_ai", "/user/shotstack/clip/preview", paramsObj)
            .then((res) => {
              if (res?.code && res.code != 1000) {
                throw new Error('视频生成失败');
              }
              context.emit("greenLight");
              router.push({
                path: "/workShotstack/materialCenter/TemplateList",
              });
              state.btnLoading = false; //关闭按钮加载效果
              state.formRef.resetFields(); //重置表单，移除校验结果
              emptSelect(); //清空下拉标签
              state.visible = false; //关闭弹窗
            })
            .finally(() => {
              state.btnLoading = false;
              message.error('视频生成失败!')
            });

        } catch (error) {
          state.btnLoading = false;
          message.error('视频生成失败!')
        }

      } else {
        // 从混剪项目进来的保存
        // 调用混剪项目保存接口
        paramsObj.type = 0; //剪辑类型
        state.btnLoading = true;
        if (route.query.openType == "copy") {
          paramsObj.id = "";
          paramsObj.unique_id = nanoid();
        }
        request
          .post("/work_ai", "/user/shotstack/template/addSave", paramsObj)
          .then((res) => {
            context.emit("greenLight");
            state.visible = false; //关闭弹窗
            state.btnLoading = false; //关闭按钮加载
            state.formRef.resetFields(); //重置表单，移除校验结果
            emptSelect(); //清空下拉标签
            router.push({
              path: "/workShotstack/creationCenter/MixedCutIntroduction",
            });
          })
          .finally(() => {
            state.btnLoading = false;
          });
      }

    };
    defineExpose({ submitHandle });

    return {
      ...toRefs(state),
      showModal,
      handleCancel,
      getSelectList,
      getTitle,
      submitHandle,
      queryData,
      allVideoGroup,
      selectHandle,
      emptSelect,
    };
  },
});
</script>

<style lang="scss" scoped></style>
